import React, { Component } from 'react'
import Dialog from './components/Dialog'

export default class App extends Component {
  constructor(){
    super()
    this.state={
      dailogVisibale:true
    }
  }
  closeCallback=()=>{
    this.setState({dailogVisibale:false})
  }
  render() {
    const {dailogVisibale}=this.state
    return (
      <div style={{display:'flex'}}>
        {
          dailogVisibale&&<Dialog title="登录"
                                  headerColor="pink" 
                                  close={this.closeCallback}>
                                 <div>
                                    <label>姓名:</label>
                                    <input type="text" placeholder='请输入用户名'/>
                                 </div>
                                 <div>
                                    <label>密码:</label>
                                    <input type="text" placeholder='请输入密码'/>
                                 </div>
                                 <div>
                                    <button style={{width:'200px', height:'25px',backgroundColor:'skyblue',border:'none'}}>登录</button>
                                 </div>
                          </Dialog>
        }

        {
          dailogVisibale&&<Dialog title="提示"
                                  headerColor="orange" 
                                  close={this.closeCallback}>
                                    <i className='iconfont icon-tishi'></i>
                                    <span>物流已经到达西安市未央区第五国际，请您查收！</span>
                                  </Dialog>
        }

        {
          dailogVisibale&&<Dialog title="物流信息" 
                      close={this.closeCallback}>
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>物流公司</th>
                    <th>价格</th>
                    <th>评价数</th>
                    <th>时效性</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1-001</td>
                    <td>圆通</td>
                    <td>100</td>
                    <td>10</td>
                    <td>6</td>
                  </tr>
                  <tr>
                    <td>1-002</td>
                    <td>中通</td>
                    <td>99</td>
                    <td>15</td>
                    <td>19</td>
                  </tr>
                  <tr>
                    <td>1-003</td>
                    <td>顺丰</td>
                    <td>105</td>
                    <td>2</td>
                    <td>2</td>
                  </tr>
                </tbody>
              </table>

          </Dialog>
        }
       
      </div>
    )
  }
}
